import React from 'react';
import {storiesOf} from '@storybook/react'
import { action } from '@storybook/addon-actions';
import { Story, Meta } from '@storybook/react/types-6-0';
import {ButtonProps} from './button';

import Button from './button';

export default {
    title: 'Example/Button',
    component: Button,
    argTypes: {
      backgroundColor: { control: 'color' },
    },
} as Meta;

const BtnTypeTemplate: Story<ButtonProps> = (args) => {
  return (
    <Button {...args}>{args.value ? args.value : 'Button'}</Button>
  )
}

const Template: Story<ButtonProps> = (args) => <Button {...args}>{args.value ? args.value : 'Button'}</Button>

// export const Default = Template.bind({});
// Default.args = {
//   btnType: 'default',
//   size: 'lg',
//   value: 'Default',
//   href: ''
// };

// export const BtnSize = Template.bind({});
// BtnSize.args = {
//   btnType: 'default',
//   size: 'lg',
//   value: 'BtnSize'
// };

const styles: React.CSSProperties = {
  textAlign: 'center',
}
const CenterDecorator = (storyFn: any) => <div style={styles}>{storyFn()}</div>
const defaultButton = () => <Button onClick={action('click')}>default button</Button>
const buttonWithSize = () => (
  <>
    <Button size='lg'>large button</Button>
    <Button size='sm'>small button</Button>
  </>
)
const buttonWithType = () => (
  <>
    <Button btnType="Primary">Primary button</Button>
    <Button btnType="danger">danger button</Button>
    <Button btnType="link" href="https://www.baidu.com">link button</Button>
  </>
)

storiesOf('Button Component', module)
  .addDecorator(CenterDecorator)
  .add('默认Button', defaultButton)
  .add('不同尺寸的Button', buttonWithSize)
  .add('不同类型的Button', buttonWithType)
